<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多盒水平布局</title>
	  <style>
	  .container {
    /* 设置为弹性布局容器 */
    display: flex;
    /* 水平方向上均匀分布子元素 */
    justify-content: space-around;
    /* 垂直方向上居中对齐子元素 */
    align-items: center;
    /* 容器高度 */
    height: 300px;
    /* 容器背景颜色 */
    background-color: #e0e0e0;
}

.box {
    /* 盒子宽度 */
    width: 100px;
    /* 盒子高度 */
    height: 100px;
    /* 内边距 */
    padding: 10px;
    /* 边框 */
    border: 1px solid #333;
    /* 外边距 */
    margin: 10px;
    /* 背景颜色 */
    background-color: #fff;
    /* 文本居中对齐 */
    text-align: center;
    /* 行高，使文本垂直居中 */
    line-height: 80px;
}
	  </style>
</head>

<body>
    <div class="container">
        <div class="box">盒子 1</div>
        <div class="box">盒子 2</div>
        <div class="box">盒子 3</div>
    </div>
</body>

</html>